<template>
	<div>
		<!-- 主视图 -->
		<!-- <el-container> -->
<!-- 			<el-header>
				<el-row :gutter="20">
				  <el-col :span="4"><div >
				  <el-button >首页</el-button>
				  </div></el-col>
				  <el-col :span="5"><div >
				  <el-button >课程</el-button>
				  </div></el-col>
				  <el-col :span="5"><div >
				  <el-button >饮食</el-button>
				  </div></el-col>
				  <el-col :span="5"><div >
				  <el-button type="success" >社区</el-button>
				  </div></el-col>
				  <el-col :span="5"><div >
				  <el-button >我的</el-button>
				  </div></el-col>
				</el-row>
			</el-header> -->
			<el-container>
				  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
				    <el-menu :default-openeds="['1']">

				      <el-submenu index="1">
				        <template slot="title"><i class="el-icon-s-opportunity"></i>
						<router-link to="/recommendDynamic" tag="span">推荐动态</router-link>
						</template>
				      </el-submenu>					  
				      <el-submenu index="2">
				        <template slot="title"><i class="el-icon-star-on"></i>
						<router-link to="/attentionDynamic" tag="span">关注动态</router-link>
						</template>
				      </el-submenu>
				      <el-submenu index="3">
				        <template slot="title"><i class="el-icon-camera-solid"></i>
						<router-link to="/dynamicIssue" tag="span">发布动态</router-link>
						</template>
				      </el-submenu>
				    </el-menu>
				  </el-aside>
				  
				<el-main>

					<el-header style="text-align: right; font-size: 12px">
						  <el-avatar style="font-size: 12px;float: left;margin-top: 10px;" icon="el-icon-user-solid"></el-avatar>
						  <b style="font-size: 12px;float: left">昵称</b>
						<el-dropdown>
							<i class="el-icon-edit" style="margin-right: 15px"></i>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>
									<router-link to="/updateUserInfo" tag="span">编辑资料</router-link>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<span>
						<router-link to="/userInfoDynamic" tag="span"><el-button type="text">我的</el-button></router-link>
						</span>
					</el-header>
					  <router-view></router-view>
				</el-main>
			</el-container>
		<!-- </el-container> -->
		
	</div>
</template>

<script>

</script>

<style>
	.el-aside {
		/* background-color: #fffae8; */
		color: #333;
		text-align: center;
		/* line-height: 200px; */
	}

	.el-main {
		background-color: #fffae8;
		color: #333;
		text-align: center;
		/* line-height: 100px; */
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.el-aside {
		/* background-color: #fff3fc; */
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		/* background-color: #E9EEF3; */
		color: #333;
		text-align: center;
		/* line-height: 160px; */
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
